<template>
    <div class="login-container">
        <el-form :model="form" @submit.native.prevent="submitForm" class="login-form">
            <h3 class="title">管理平台</h3>
            <el-form-item >
                <el-input v-model="form.username" placeholder="Username" :prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="form.password" type="password" placeholder="Password" :prefix-icon="Lock" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width:100%;" type="primary">Login</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'

const form = ref({
  username: '',
  password: ''
})

const submitForm = async () => {
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #F0F2F5;
    background-size: cover;
}

.login-form {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}
</style>
